// 设备拓扑
<template>
  <div>
    <el-dialog
      v-el-drag-dialog="{resize: resize}"
      :title="dialogTitle"
      :visible="dialogVisible"
      width="1200px"
      @close="close"
    >
      <div id="topoNodeBox" class="topo-node-box">
        <vis-view
          id="deviceTopo"
          ref="deviceTopo"
          :nodes="nodes"
          :edges="edges"
          :show-eagel-eye="false"
          @selectNode="selectNode"
          @selectEdge="selectEdge"
        />
        <div class="topo-node-btn">
          <el-button type="primary" @click="getData">刷新</el-button>
          <el-button type="primary" @click="saveTopos">保存</el-button>
        </div>
      </div>
      <span slot="footer">
        <el-button type="primary" @click="close">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import deviceTopoData from "../data/deviceTopo.js"
  import stationDeviceData from "../data/stationDevice.js"
  import { formatEdges, formatNodes } from '@/components/vis-view/js/format'
  import { getParentsById } from '@/utils/common'
  import VisView from '@/components/vis-view'

  export default {
    components: {
      VisView,
    },
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      },
      node: {
        type: Object,
        default: () => {}
      }
    },
    data() {
      return {
        nodesData: [],
        edges: [],
        nodes: [],
        deviceList: [],
        rowData: {},
        segmentShow: false,
        setEdit: true
      }
    },
    computed: {
      ...mapGetters(['regionTree']),
      dialogTitle() {
        return getParentsById(this.regionTree, this.node.nodeId, 'regionId').reverse().map(i => i.regionName).join('/')
      }
    },
    mounted() {
      console.log(this.node)
      this.getData()
    },
    methods: {
      // 弹窗关闭
      closeSegment() {
        this.setEdit = false
        this.$nextTick(() => {
          this.setEdit = true
        })
        this.segmentShow = false
      },
      resize() {
        document.getElementById('topoNodeBox').style.height =
          document.getElementById('topoNodeBox').parentNode.offsetHeight - 50 + 'px'
        this.$refs.deviceTopo && this.$refs.deviceTopo.init()
      },
      getData() {
        this.getTopos()
        this.getDeviceList()
      },
      // 获取拓扑数据
      getTopos() {
              // 使用网段id作为线条id
              const edges = deviceTopoData.edges.map(i => {
                return {
                  ...i,
                  id: i.bizInfo.segmentId || null
                }
              })
              this.handleNodes(deviceTopoData.nodes, edges)
      },
      // 获取设备列表详情数据
      getDeviceList() {
        this.deviceList = stationDeviceData
      },
      // 保存位置
      saveTopos() {
        const topoPositions =
          this.$refs.deviceTopo.myNetwork.getPositions() || {}
        const nodeList = this.nodes.map((ele, index) => {
          return {
            type: 'NODE',
            nodeId: ele.nodeId,
            x: topoPositions[index + 1].x,
            y: topoPositions[index + 1].y
          }
        })
        console.log(nodeList)
      },
      handleNodes(nodes, edges) {
        if (nodes) {
          this.nodes = formatNodes(nodes, 'device')
        }
        if (edges) {
          this.edges = formatEdges(edges)
        }
      },
      selectEdge(obj) {
        if (obj.mouseStatus === 'SELECT') {
          // 查询对应的网段
          const queryData = {
            keyword: obj.id,
            page: { page: 1, size: 20 }
          }
          console.log(queryData)
        }
      },
      selectNode(obj) {
        console.log('当前设备', obj)
        // 根据节点id去原始数据里筛选对应的设备id
        const currentDevice =
          this.deviceList.find((i) => i.nodeId === obj.nodeId) || obj
        this.$emit('selectDevice', { ...currentDevice, ...obj })
        this.$refs.deviceTopo.myNetwork.unselectAll() // 拓扑里，取消所有节点选中
      },
      close() {
        this.$emit('update:dialogVisible', false)
      }
    }
  }
</script>
<style scoped>
.topo-node-box {
  position:relative;
  height: 400px;
  overflow: hidden;
}
.topo-node-btn {
  position: absolute;
  right: 0;
  top: 0;
}
</style>
